<template>
    <div class="principle">
        <LidarHeader />

        <PrincipleListView />

        <div audio :style="divAudioStyle" v-show="PrincipleComponent.Default.Description.value != ''">
            <span :style="descriptionStyle">
                {{
                    PrincipleComponent.Default.Description.value
                }}
            </span>
            <img src="/static/InertialNavigation/icon-foldout.png" alt="音频" title="" @click="OnSwitch">
        </div>

        <Speak hidden :stats="stats"
            v-if="PrincipleComponent.Default.Description.value != '' && PrincipleComponent.Default.DescriptionAudioAccessibility.value">
            {{ PrincipleComponent.Default.Description.value }}
        </Speak>

        <LidarNav ref="InertialNavigationNavRef"/>
    </div>
</template>

<script setup lang="ts">
import Speak from '@components/TTS/Speak.vue';
import { computed, ComputedRef, onMounted, onUnmounted, reactive, ref, StyleValue } from 'vue';
import { PrincipleComponent } from './InertialNavigationComponent';
import LidarHeader from './InertialNavigationHeader.vue';
import LidarNav from './InertialNavigationNav.vue';
import PrincipleListView from './PrincipleListView.vue';

const stats = reactive({ pausable: false });
const InertialNavigationNavRef = ref()
function OnSwitch(): void {
    PrincipleComponent.Default.DescriptionAudioAccessibility.value = !PrincipleComponent.Default.DescriptionAudioAccessibility.value;
    stats.pausable = !stats.pausable;
    InertialNavigationNavRef.value.changeModel()
}

const divAudioStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            backgroundColor: PrincipleComponent.Default.DescriptionAudioAccessibility.value ? '#131620' : 'transparent',
        } as StyleValue;
    }
);

const descriptionStyle: ComputedRef<StyleValue> = computed(
    () => {
        return {
            visibility: PrincipleComponent.Default.DescriptionAudioAccessibility.value ? 'visible' : 'hidden',
        } as StyleValue;
    }
);

onMounted(() =>{
    PrincipleComponent.Default.Awake()
});
onUnmounted(() => PrincipleComponent.Default.Destroy());
</script>

<style scoped>
div[audio] {
    position: absolute;
    bottom: 6rem;
    left: 50%;

    transform: translateX(-50%);

    max-width: 100rem;

    padding: 3rem;

    background-color: #131620;
    border-radius: 2rem;
}

div[audio]>span {
    color: #BEBEFF;
    font-size: 1.8em;

    text-indent: 2em;
}

div[audio]>img {
    width: 3rem;
    height: 3rem;

    position: absolute;
    top: 1rem;
    right: 1rem;

    border-radius: 50%;
    background-color: #131620;

    pointer-events: auto;
}
</style>